<template>
  <q-markup-table separator="horizontal" flat bordered>
    <tbody>
    <tr>
      <td>结果值:</td>
      <td colspan="5">{{result}}</td>
    </tr>
    <tr>
      <td style="width: 50px;">
        <q-radio v-model="model" val="type1"></q-radio>
      </td>
      <td colspan="5">秒，允许的通配符[, - * /]</td>
    </tr>
    <tr>
      <td>
        <q-radio v-model="model" val="type2"></q-radio>
      </td>
      <td>周期从</td>
      <td>
        <q-input outlined dense type="number" v-model="cycle01">
          <template v-slot:prepend>
            <q-icon class="cursor-pointer" dense name="horizontal_rule" @click="reduceCycle01"></q-icon>
          </template>
          <template v-slot:append>
            <q-icon class="cursor-pointer" dense name="add" @click="addCycle01"></q-icon>
          </template>
        </q-input>
      </td>
      <td>至</td>
      <td>
        <q-input outlined dense type="number" v-model="cycle02">
          <template v-slot:prepend>
            <q-icon class="cursor-pointer" dense name="horizontal_rule" @click="reduceCycle02"></q-icon>
          </template>
          <template v-slot:append>
            <q-icon class="cursor-pointer" dense name="add" @click="addCycle02"></q-icon>
          </template>
        </q-input>
      </td>
      <td>秒</td>
    </tr>
    <tr>
      <td>
        <q-radio v-model="model" val="type3"></q-radio>
      </td>
      <td>从</td>
      <td>
        <q-input outlined dense type="number" v-model="start">
          <template v-slot:prepend>
            <q-icon class="cursor-pointer" dense name="horizontal_rule" @click="reduceStart"></q-icon>
          </template>
          <template v-slot:append>
            <q-icon class="cursor-pointer" dense name="add" @click="addStart"></q-icon>
          </template>
        </q-input>
      </td>
      <td>
        秒开始，每
      </td>
      <td>
        <q-input outlined dense type="number" v-model="intervals">
          <template v-slot:prepend>
            <q-icon class="cursor-pointer" dense name="horizontal_rule" @click="reduceIntervals"></q-icon>
          </template>
          <template v-slot:append>
            <q-icon class="cursor-pointer" dense name="add" @click="addIntervals"></q-icon>
          </template>
        </q-input>
      </td>
      <td>
        秒执行一次
      </td>
    </tr>
    <tr>
      <td>
        <q-radio v-model="model" val="type4"></q-radio>
      </td>
      <td>指定</td>
      <td colspan="4">
        <q-select :multiple="true" dense emit-value v-model="multi" :options="multiOptions"
                  label="指定秒数（可多选）" @change="changeMulti"></q-select>
      </td>
    </tr>
    </tbody>
  </q-markup-table>
</template>

<script setup>
import {computed, defineProps, onMounted, ref, toRefs, watch} from 'vue'
const props = defineProps({
  initData: {
    type: String,
    required: false,
    default: '*'
  }
})
const {initData} = toRefs(props)
const model = ref('type1')
const cycle01 = ref(1)
const cycle02 = ref(2)
const multi = ref(new Array())
const start = ref(0)
const intervals = ref(1)
const emit = defineEmits(['handleFinish'])
const finalResult = ref('*')
onMounted(()=>{
  doChange()
})
const doChange = () =>{
  let newValue = initData.value
  if(newValue) {
    if (newValue === '*') {
      model.value = 'type1'
    } else if (newValue.indexOf('-') != -1) {
      model.value = 'type2'
      let values = newValue.split("-")
      cycle01.value = parseInt(values[0])
      cycle02.value = parseInt(values[1])
    } else if (newValue.indexOf('/') != -1) {
      model.value = 'type3'
      let values = newValue.split("/")
      start.value = parseInt(values[0])
      intervals.value = parseInt(values[1])
    }  else if (newValue.indexOf(',') != -1) {
      model.value = 'type4'
      let values = newValue.split(",")
      let abc = new Array();
      for(let i=0;i<values.length;i++)
        abc.push(parseInt(values[i]))
      multi.value = abc
    }
  }
}
watch(() => initData.value ,() => {
  doChange()
})
watch(() => finalResult.value ,() => {
  emit('handleFinish',finalResult.value)
})
watch(() => cycle01.value ,() => {
  if (cycle01.value >= cycle02.value) cycle01.value = cycle02.value - 1
  if (cycle01.value < 0) cycle01.value = 0
  if (cycle01.value > 59) cycle01.value = 58
  computeExpress()
})
watch(() => cycle02.value ,() => {
  if (cycle01.value >= cycle02.value) cycle02.value = cycle01.value + 1
  if (cycle02.value < 1) cycle02.value = 1
  if (cycle02.value > 59) cycle02.value = 59
  computeExpress()
})
watch(() => start.value ,() => {
  if(start.value < 0) start.value = 0
  if ((start.value + intervals.value) > 59) start.value = 59 - intervals.value
  computeExpress()
})
watch(() => intervals.value ,() => {
  if(intervals.value < 0) intervals.value = 0
  if ((start.value + intervals.value) > 59) start.value = 59 - intervals.value
  computeExpress()
})
const multiOptions = computed(() => {
  let result = []
  for (let i = 0; i < 60; i++) {
    result.push({label: i, value: i});
  }
  return result
})
const result = computed(()=>{
  return computeExpress()
})
const computeExpress = ()=>{
  if(model.value === 'type1'){
    finalResult.value =  "*"
    return finalResult.value
  }else if(model.value === 'type2'){
    finalResult.value = cycle01.value + "-" + cycle02.value
    return finalResult.value
  }else if(model.value === 'type3'){
    finalResult.value = start.value + "/" + intervals.value
    return finalResult.value
  }else if(model.value === 'type4'){
    finalResult.value = multi.value.join(",")
    return finalResult.value
  }
}
const addCycle01 = () => {
  cycle01.value = cycle01.value + 1
  if (cycle01.value >= cycle02.value) cycle01.value = cycle02.value - 1
  if (cycle01.value < 0) cycle01.value = 0
  if (cycle01.value > 59) cycle01.value = 58
  computeExpress()
}
const reduceCycle01 = () => {
  cycle01.value = cycle01.value - 1
  if (cycle01.value >= cycle02.value) cycle01.value = cycle02.value - 1
  if (cycle01.value < 0) cycle01.value = 0
  if (cycle01.value > 59) cycle01.value = 58
  computeExpress()
}
const addCycle02 = () => {
  cycle02.value = cycle02.value + 1
  if (cycle01.value >= cycle02.value) cycle02.value = cycle01.value + 1
  if (cycle02.value < 1) cycle02.value = 1
  if(cycle02.value > 59) cycle02.value = 59
  computeExpress()
}
const reduceCycle02 = () => {
  cycle02.value = cycle02.value - 1
  if (cycle01.value >= cycle02.value) cycle02.value = cycle01.value + 1
  if (cycle02.value < 1) cycle02.value = 1
  if (cycle02.value > 59) cycle02.value = 59
  computeExpress()
}
const addStart = () => {
  start.value = start.value + 1
  if(start.value < 0) start.value = 0
  if ((start.value + intervals.value) > 59) start.value = 59 - intervals.value
  computeExpress()
}
const reduceStart = () => {
  start.value = start.value - 1
  if(start.value < 0) start.value = 0
  if ((start.value + intervals.value) > 59) start.value = 59 - intervals.value
  computeExpress()
}
const addIntervals = () => {
  intervals.value = intervals.value + 1
  if(intervals.value < 1) intervals.value = 1
  if ((start.value + intervals.value) > 59) intervals.value = 59 - start.value
  computeExpress()
}
const reduceIntervals = () => {
  intervals.value = intervals.value - 1
  if(intervals.value < 1) intervals.value = 1
  if ((start.value + intervals.value) > 59) intervals.value = 59 - start.value
  computeExpress()
}

const changeMulti = () =>{
  computeExpress()
}
</script>

<style scoped>

</style>
